<template>
  <view>
    <view class="header">
      <search v-if="searchIf" ref="sea" @confirm="confirmSearch" />
      <view class="title">
        <scroll-view scroll-x style="width: 100%; white-space: nowrap" :scroll-left="scrollLeft">
          <view v-for="(item, index) in tree_stack" class="inline-item" :key="index">
            <view class="inline-item" v-if="index == 0" @click="backTree(item, -1)">
              <text :class="[isActive(index) && !isre ? 'none' : 'active']">通讯录</text>
            </view>
            <view
              v-if="index == 0 && isre"
              @click="backTree(item, -2)"
              :class="[index == tree_stack.length - 1 && isre ? 'none' : 'active', 'inline-item']"
            >
              <view class="uni-inline-item">
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
                <view>搜索结果</view>
              </view>
            </view>
            <view class="inline-item" @click="backTree(item, index)" v-if="index != 0">
              <view class="uni-inline-item">
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
                <view :class="isActive(index) ? 'none inline-ite' : 'active'">
                  {{ item[treeProp.label] }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view>
      <scroll-view scroll-y="true" class="user-scroll-wrap">
        <view class="container-list">
          <u-gap bgColor="#F5F5F5" height="8" v-if="multiple"></u-gap>
          <view v-if="!isAll">
            <view class="select-all-wrap" @click="selectAllHandle" v-if="multiple">
              <image
                v-if="selectAllStatus"
                class="select-icon"
                src="/static/images/work/dbd/selected_yes.png"
                mode="aspectFit"
              ></image>
              <image v-else class="select-icon" src="/static/images/work/dbd/selected_no.png" mode="aspectFit"> </image>
              <view>全选</view>
            </view>
          </view>

          <u-gap bgColor="#F5F5F5" height="8" v-if="deptListData.length > 0"></u-gap>

          <view
            class="common"
            v-for="(item, index) in deptListData"
            @click="handleDeptClick(item, index)"
            :key="item.deptId + '-dept'"
          >
            <label class="info-content">
              <view class="uni-inline-item">
                <!-- 多选 -->
                <view @click.stop="handleDeptClick(item, -1)">
                  <image
                    v-if="isSelect(item)"
                    class="select-icon"
                    src="/static/images/work/dbd/selected_yes.png"
                    mode="aspectFit"
                  ></image>
                  <image
                    v-else
                    class="select-icon"
                    src="/static/images/work/dbd/selected_no.png"
                    mode="aspectFit"
                  ></image>
                </view>
                <view class="dept-icon-wrap">
                  <image class="dept-icon" src="/static/images/work/dept_icon.png" mode="aspectFit"> </image>
                </view>
                <view class="dept-name"> {{ item[treeProp.label] }}</view>
              </view>
              <view class="uni-inline-item">
                <view class="user-num">{{ item.staffCount }}</view>
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
              </view>
            </label>
          </view>
          <u-gap bgColor="#F5F5F5" height="8"></u-gap>
          <view
            class="common"
            v-for="(item, index) in userListData"
            @click="handleUserClick(item, index)"
            :key="item.userId"
          >
            <label class="info-content">
              <view class="uni-inline-item">
                <view>
                  <image
                    v-if="isUserSelect(item)"
                    class="select-icon"
                    src="/static/images/work/dbd/selected_yes.png"
                    mode="aspectFit"
                  ></image>
                  <image
                    v-else
                    class="select-icon"
                    src="/static/images/work/dbd/selected_no.png"
                    mode="aspectFit"
                  ></image>
                </view>
                <view class="user-icon-wrap">
                  <image v-if="item.avatar" class="user-icon" :src="staticUrl + item.avatar" mode="aspectFit"> </image>
                  <image v-else class="user-icon" src="/static/images/default_avatar_icon.png" mode="aspectFit">
                  </image>
                </view>
                <view class="dept-name"> {{ item.name }}</view>
              </view>
              <view class="uni-inline-item" v-if="item.children">
                <view class="user-num">{{ item.staffCount }}</view>
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
              </view>
            </label>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="btn box_sizing">
      <!-- 多选底部信息 -->
      <view class="bottom-btn-wrap" v-if="multiple" @click="selectedInfoPopup = true">
        <view class="selected-text" v-if="userCheckList.length > 0 || deptCheckList.length > 0">
          已选择：{{ getUserNum }}人,其中有{{ deptCheckList.length }}个部门（含子部门)
        </view>
        <view class="selected-text" v-else>未选择</view>
        <u-icon class="arrow-up" name="arrow-up" size="12" color="#88B4C4"></u-icon>
        <button class="confirm-btn" type="primary" @click.stop="backConfirm">确定({{ getUserNum || 0 }}/999)</button>
      </view>

      <!-- 单选底部信息 -->
      <view class="bottom-btn-wrap" v-else>
        <view class="selected-text" v-if="userCheckList.length > 0"> 已选择：{{ userCheckList[0].name }} </view>
        <view class="selected-text" v-else>未选择</view>
        <button class="confirm-btn" type="primary" @click.stop="backConfirm">确定</button>
      </view>
    </view>

    <u-popup :show="selectedInfoPopup" mode="bottom" @close="selectedInfoPopup = false" round="10">
      <view class="selected-inof-popup-wrap">
        <view class="uni-inline-item popup-header">
          <view class="selected-text">
            已选择：{{ getUserNum }}人,其中有{{ deptCheckList.length }}个部门（含子部门)
          </view>
          <view class="close-popup-btn" @click="selectedInfoPopup = false">确认</view>
        </view>
        <scroll-view scroll-y="true" class="user-scroll-wrap">
          <view
            class="common"
            v-for="(item, index) in deptCheckList"
            @click="handleDeptClick(item, -1)"
            :key="item.deptId + '-dept'"
          >
            <label class="info-content">
              <view class="uni-inline-item">
                <!-- 多选 -->
                <view>
                  <image
                    v-if="isSelect(item)"
                    class="select-icon"
                    src="/static/images/work/dbd/selected_yes.png"
                    mode="aspectFit"
                  ></image>
                  <image
                    v-else
                    class="select-icon"
                    src="/static/images/work/dbd/selected_no.png"
                    mode="aspectFit"
                  ></image>
                </view>
                <view class="dept-icon-wrap">
                  <image class="dept-icon" src="/static/images/work/dept_icon.png" mode="aspectFit"> </image>
                </view>
                <view class="dept-name"> {{ item.deptName }}</view>
              </view>
              <view class="uni-inline-item" v-if="item.children">
                <view class="user-num">{{ item.staffCount }}</view>
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
              </view>
            </label>
          </view>
          <u-gap bgColor="#F5F5F5" height="8"></u-gap>
          <view
            class="common"
            v-for="(item, index) in userCheckList"
            @click="handleUserClick(item, index)"
            :key="item.userId"
          >
            <label class="info-content">
              <view class="uni-inline-item">
                <view>
                  <image
                    v-if="isUserSelect(item)"
                    class="select-icon"
                    src="/static/images/work/dbd/selected_yes.png"
                    mode="aspectFit"
                  ></image>
                  <image
                    v-else
                    class="select-icon"
                    src="/static/images/work/dbd/selected_no.png"
                    mode="aspectFit"
                  ></image>
                </view>
                <view class="user-icon-wrap">
                  <image v-if="item.avatar" class="user-icon" :src="staticUrl + item.avatar" mode="aspectFit"> </image>
                  <image v-else class="user-icon" src="/static/images/default_avatar_icon.png" mode="aspectFit">
                  </image>
                </view>
                <view class="dept-name"> {{ item.name }}</view>
              </view>
              <view class="uni-inline-item" v-if="item.children">
                <view class="user-num">{{ item.staffCount }}</view>
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
              </view>
            </label>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script src="./code.js" type="text/javascript"></script>

<style lang="scss" scoped>
@import './css/style.scss';
</style>
